<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>简洁淡雅图片取色工具</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
            line-height: 1.6;
            color: #5a5a5a;
            background: linear-gradient(to bottom, #f9f9f9, #f0f4f8);
            min-height: 100vh;
            padding: 20px;
        }
        
        .app-container {
            max-width: 1400px;
            margin: 0 auto;
            background: white;
            border-radius: 16px;
            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
            overflow: hidden;
        }
        
        header {
            padding: 25px 30px;
            background: white;
            border-bottom: 1px solid #f0f0f0;
            text-align: center;
            position: relative;
        }

        .back-to-home {
            position: absolute;
            left: 30px;
            top: 50%;
            transform: translateY(-50%);
            padding: 8px 16px;
            background: #f8f9fa;
            border: 1px solid #e9ecef;
            border-radius: 6px;
            cursor: pointer;
            font-size: 0.9rem;
            color: #495057;
            display: flex;
            align-items: center;
            gap: 6px;
            transition: all 0.2s ease;
        }

        .back-to-home:hover {
            background: #e9ecef;
            color: #212529;
        }
        
        .logo {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 12px;
            margin-bottom: 8px;
        }
        
        .logo i {
            font-size: 1.8rem;
            color: #7c90db;
        }
        
        h1 {
            font-size: 2.2rem;
            font-weight: 300;
            color: #4a5568;
        }
        
        .subtitle {
            font-size: 1.1rem;
            color: #718096;
            max-width: 600px;
            margin: 0 auto;
        }
        
        .main-content {
            display: flex;
            min-height: 600px;
        }
        
        .sidebar {
            width: 320px;
            background: #fafbfc;
            padding: 25px;
            border-right: 1px solid #edf2f7;
            display: flex;
            flex-direction: column;
            transition: all 0.3s ease;
        }
        
        .preview-container {
            flex: 1;
            position: relative;
            background: #f8fafc;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
        }
        
        #image-canvas {
            max-width: 100%;
            max-height: 100%;
            cursor: crosshair;
            box-shadow: 0 2px 15px rgba(0, 0, 0, 0.03);
            border-radius: 8px;
        }
        
        .toggle-sidebar {
            position: absolute;
            top: 20px;
            left: 20px;
            background: white;
            color: #718096;
            border: 1px solid #e2e8f0;
            border-radius: 50%;
            width: 40px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            z-index: 2;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
            transition: all 0.2s;
        }
        
        .toggle-sidebar:hover {
            color: #4a5568;
            box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
        }
        
        .zoom-controls {
            position: absolute;
            bottom: 20px;
            right: 20px;
            display: flex;
            gap: 12px;
            z-index: 2;
        }
        
        .control-btn {
            background: white;
            color: #718096;
            border: 1px solid #e2e8f0;
            border-radius: 50%;
            width: 48px;
            height: 48px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
            transition: all 0.2s;
        }
        
        .control-btn:hover {
            color: #4a5568;
            box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
            transform: translateY(-2px);
        }
        
        .section {
            margin-bottom: 28px;
        }
        
        h2 {
            font-size: 1.3rem;
            font-weight: 500;
            margin-bottom: 18px;
            padding-bottom: 12px;
            border-bottom: 1px solid #edf2f7;
            color: #4a5568;
        }
        
        .upload-container {
            margin-bottom: 20px;
            text-align: center;
            padding: 25px;
            border: 2px dashed #e2e8f0;
            border-radius: 12px;
            transition: all 0.3s;
        }
        
        .upload-container:hover {
            border-color: #7c90db;
            background: rgba(124, 144, 219, 0.03);
        }
        
        .upload-container p {
            margin-bottom: 15px;
            color: #718096;
        }
        
        #file-input {
            display: none;
        }
        
        .upload-btn {
            display: inline-block;
            padding: 12px 24px;
            background: #7c90db;
            color: white;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.3s;
            font-weight: 500;
            box-shadow: 0 4px 6px rgba(124, 144, 219, 0.2);
        }
        
        .upload-btn:hover {
            background: #6b81d0;
            box-shadow: 0 6px 8px rgba(124, 144, 219, 0.25);
            transform: translateY(-2px);
        }
        
        .color-result {
            display: flex;
            align-items: center;
            margin-bottom: 20px;
            background: white;
            padding: 20px;
            border-radius: 12px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
            border: 1px solid #edf2f7;
        }
        
        .color-preview {
            width: 70px;
            height: 70px;
            border-radius: 10px;
            margin-right: 18px;
            border: 1px solid #edf2f7;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
        }
        
        .color-details {
            flex: 1;
        }
        
        .color-value {
            font-family: 'Fira Code', monospace;
            font-size: 1.3rem;
            margin-bottom: 12px;
            padding: 10px;
            background: #f8fafc;
            border-radius: 6px;
            border: 1px solid #e2e8f0;
            color: #4a5568;
            letter-spacing: 0.5px;
        }
        
        .copy-btn {
            padding: 10px 16px;
            background: #a0aec0;
            color: white;
            border: none;
            border-radius: 6px;
            cursor: pointer;
            transition: all 0.3s;
            font-weight: 500;
            width: 100%;
        }
        
        .copy-btn:hover {
            background: #909cb3;
        }
        
        .instructions {
            background: white;
            padding: 20px;
            border-radius: 12px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
            border: 1px solid #edf2f7;
        }
        
        .instructions h3 {
            margin-bottom: 15px;
            color: #4a5568;
            font-weight: 500;
        }
        
        .instructions ul {
            padding-left: 20px;
        }
        
        .instructions li {
            margin-bottom: 10px;
            color: #718096;
            line-height: 1.5;
        }
        
        .recent-colors {
            display: flex;
            gap: 10px;
            flex-wrap: wrap;
            margin-top: 12px;
        }
        
        .recent-color {
            width: 32px;
            height: 32px;
            border-radius: 6px;
            border: 1px solid #e2e8f0;
            cursor: pointer;
            transition: all 0.2s;
        }
        
        .recent-color:hover {
            transform: scale(1.1);
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        }
        
        .empty-state {
            color: #a0aec0;
            text-align: center;
            padding: 40px 20px;
        }
        
        .empty-state i {
            font-size: 3.5rem;
            margin-bottom: 15px;
            color: #cbd5e0;
        }
        
        .empty-state p {
            font-size: 1.1rem;
            margin-bottom: 20px;
        }
        
        @media (max-width: 900px) {
            .main-content {
                flex-direction: column;
            }
            
            .sidebar {
                width: 100%;
                border-right: none;
                border-bottom: 1px solid #edf2f7;
            }
            
            .preview-container {
                min-height: 400px;
            }
        }
        
        .color-history {
            margin-top: 20px;
        }
        
        .history-title {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 12px;
        }
        
        .clear-history {
            color: #718096;
            background: none;
            border: none;
            cursor: pointer;
            font-size: 0.9rem;
        }
        
        .clear-history:hover {
            color: #4a5568;
        }
        
        footer {
            text-align: center;
            padding: 25px;
            color: #a0aec0;
            font-size: 0.9rem;
            border-top: 1px solid #edf2f7;
            background: #fafbfc;
        }
    </style>
</head>
<body>
    <div class="app-container">
        <header>
            <button class="back-to-home" onclick="window.location.href='index.html'">
                <i class="fas fa-home"></i> 返回首页
            </button>
            <div class="logo">
                <i class="fas fa-palette"></i>
                <h1>图片取色工具</h1>
            </div>
            <p class="subtitle">上传图片，缩放、移动并获取图片中任意位置的颜色值</p>
        </header>
        
        <div class="main-content">
            <div class="sidebar">
                <div class="section">
                    <h2>图片上传</h2>
                    <div class="upload-container">
                        <p>选择图片开始取色</p>
                        <label for="file-input" class="upload-btn">
                            <i class="fas fa-cloud-upload-alt"></i> 选择图片
                        </label>
                        <input type="file" id="file-input" accept="image/*">
                    </div>
                </div>
                
                <div class="section">
                    <h2>取色结果</h2>
                    <div class="color-result">
                        <div class="color-preview" id="color-preview"></div>
                        <div class="color-details">
                            <div class="color-value" id="color-value">#FFFFFF</div>
                            <button class="copy-btn" id="copy-btn">
                                <i class="fas fa-copy"></i> 复制颜色值
                            </button>
                        </div>
                    </div>
                    
                    <div class="color-history">
                        <div class="history-title">
                            <h3>最近使用</h3>
                            <button class="clear-history" id="clear-history">清空</button>
                        </div>
                        <div class="recent-colors" id="recent-colors">
                            <!-- 最近颜色将通过JS动态添加 -->
                        </div>
                    </div>
                </div>
                
                <div class="section">
                    <h2>使用说明</h2>
                    <div class="instructions">
                        <ul>
                            <li>上传图片后，使用鼠标滚轮或按钮进行缩放</li>
                            <li>在图片上按住鼠标左键可以拖动图片</li>
                            <li>点击图片上的任意位置即可获取该位置的颜色值</li>
                            <li>使用"复制颜色值"按钮复制当前颜色到剪贴板</li>
                        </ul>
                    </div>
                </div>
            </div>
            
            <div class="preview-container">
                <button class="toggle-sidebar" id="toggle-sidebar">
                    <i class="fas fa-bars"></i>
                </button>
                
                <canvas id="image-canvas">
                    您的浏览器不支持Canvas，请升级浏览器
                </canvas>
                
                <div class="zoom-controls">
                    <button class="control-btn" id="zoom-in">
                        <i class="fas fa-search-plus"></i>
                    </button>
                    <button class="control-btn" id="zoom-out">
                        <i class="fas fa-search-minus"></i>
                    </button>
                    <button class="control-btn" id="reset-view">
                        <i class="fas fa-sync"></i>
                    </button>
                </div>
            </div>
        </div>
        
        <footer>
            <p>© 2023 简洁淡雅图片取色工具 | 使用HTML5 Canvas实现</p>
        </footer>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 获取DOM元素
            const fileInput = document.getElementById('file-input');
            const canvas = document.getElementById('image-canvas');
            const ctx = canvas.getContext('2d');
            const colorPreview = document.getElementById('color-preview');
            const colorValue = document.getElementById('color-value');
            const copyBtn = document.getElementById('copy-btn');
            const zoomInBtn = document.getElementById('zoom-in');
            const zoomOutBtn = document.getElementById('zoom-out');
            const resetViewBtn = document.getElementById('reset-view');
            const toggleSidebarBtn = document.getElementById('toggle-sidebar');
            const sidebar = document.querySelector('.sidebar');
            const clearHistoryBtn = document.getElementById('clear-history');
            const recentColorsContainer = document.getElementById('recent-colors');
            
            // 初始化变量
            let img = null;
            let scale = 1;
            let offsetX = 0;
            let offsetY = 0;
            let isDragging = false;
            let dragStartX = 0;
            let dragStartY = 0;
            let recentColors = [];
            
            // 初始化Canvas尺寸
            function initCanvasSize() {
                const container = canvas.parentElement;
                canvas.width = container.clientWidth;
                canvas.height = container.clientHeight;
                drawImage();
            }
            
            // 绘制图片到Canvas
            function drawImage() {
                if (!img) {
                    // 绘制默认状态
                    ctx.fillStyle = '#f8fafc';
                    ctx.fillRect(0, 0, canvas.width, canvas.height);
                    
                    // 绘制图标和提示文字
                    const iconSize = 80;
                    const x = canvas.width / 2 - iconSize / 2;
                    const y = canvas.height / 2 - iconSize / 2 - 20;
                    
                    ctx.fillStyle = '#e2e8f0';
                    ctx.font = '48px FontAwesome';
                    ctx.textAlign = 'center';
                    ctx.fillText('\uf03e', x + iconSize/2, y + iconSize/2 + 15);
                    
                    ctx.fillStyle = '#cbd5e0';
                    ctx.font = '16px Segoe UI, Helvetica Neue, sans-serif';
                    ctx.fillText('请上传图片以开始取色', canvas.width / 2, y + iconSize + 40);
                    return;
                }
                
                ctx.clearRect(0, 0, canvas.width, canvas.height);
                
                // 计算绘制参数
                const scaledWidth = img.width * scale;
                const scaledHeight = img.height * scale;
                
                // 绘制图片
                ctx.drawImage(img, offsetX, offsetY, scaledWidth, scaledHeight);
            }
            
            // 处理图片上传
            fileInput.addEventListener('change', function(e) {
                if (e.target.files && e.target.files[0]) {
                    const reader = new FileReader();
                    
                    reader.onload = function(event) {
                        img = new Image();
                        img.onload = function() {
                            initCanvasSize();
                            // 初始化图片位置（居中）
                            scale = Math.min(
                                canvas.width / img.width,
                                canvas.height / img.height
                            ) * 0.85; // 稍微缩小一点，留出边距
                            offsetX = (canvas.width - img.width * scale) / 2;
                            offsetY = (canvas.height - img.height * scale) / 2;
                            drawImage();
                        };
                        img.src = event.target.result;
                    };
                    
                    reader.readAsDataURL(e.target.files[0]);
                }
            });
            
            // 鼠标滚轮缩放
            canvas.addEventListener('wheel', function(e) {
                if (!img) return;
                
                e.preventDefault();
                
                // 计算缩放前的鼠标在图片上的位置
                const rect = canvas.getBoundingClientRect();
                const x = e.clientX - rect.left;
                const y = e.clientY - rect.top;
                const imageX = (x - offsetX) / scale;
                const imageY = (y - offsetY) / scale;
                
                // 计算缩放比例
                const zoomIntensity = 0.1;
                const wheel = e.deltaY < 0 ? 1 : -1;
                const zoom = Math.exp(wheel * zoomIntensity);
                
                // 应用缩放
                scale *= zoom;
                
                // 限制缩放范围
                scale = Math.max(0.1, Math.min(scale, 10));
                
                // 调整偏移量，使缩放中心保持在同一位置
                offsetX = x - imageX * scale;
                offsetY = y - imageY * scale;
                
                drawImage();
            });
            
            // 鼠标拖动图片
            canvas.addEventListener('mousedown', function(e) {
                if (!img) return;
                
                isDragging = true;
                dragStartX = e.clientX - offsetX;
                dragStartY = e.clientY - offsetY;
                canvas.style.cursor = 'grabbing';
            });
            
            document.addEventListener('mousemove', function(e) {
                if (!isDragging || !img) return;
                
                offsetX = e.clientX - dragStartX;
                offsetY = e.clientY - dragStartY;
                drawImage();
            });
            
            document.addEventListener('mouseup', function() {
                isDragging = false;
                canvas.style.cursor = 'crosshair';
            });
            
            // 取色功能
            canvas.addEventListener('click', function(e) {
                if (!img) return;
                
                const rect = canvas.getBoundingClientRect();
                const x = e.clientX - rect.left;
                const y = e.clientY - rect.top;
                
                // 检查点击位置是否在图片范围内
                const imageX = (x - offsetX) / scale;
                const imageY = (y - offsetY) / scale;
                
                if (imageX >= 0 && imageX < img.width && imageY >= 0 && imageY < img.height) {
                    // 获取像素数据
                    const pixelData = ctx.getImageData(x, y, 1, 1).data;
                    const r = pixelData[0];
                    const g = pixelData[1];
                    const b = pixelData[2];
                    
                    // 转换为十六进制
                    const hexColor = `#${r.toString(16).padStart(2, '0')}${g.toString(16).padStart(2, '0')}${b.toString(16).padStart(2, '0')}`;
                    
                    // 更新UI
                    colorPreview.style.backgroundColor = hexColor;
                    colorValue.textContent = hexColor.toUpperCase();
                    
                    // 添加到最近使用颜色
                    addRecentColor(hexColor);
                }
            });
            
            // 添加最近使用颜色
            function addRecentColor(color) {
                // 避免重复添加相同颜色
                if (recentColors.includes(color)) return;
                
                recentColors.unshift(color);
                if (recentColors.length > 12) {
                    recentColors.pop();
                }
                
                updateRecentColors();
                
                // 保存到localStorage
                localStorage.setItem('recentColors', JSON.stringify(recentColors));
            }
            
            // 更新最近使用颜色显示
            function updateRecentColors() {
                recentColorsContainer.innerHTML = '';
                
                recentColors.forEach(color => {
                    const colorEl = document.createElement('div');
                    colorEl.className = 'recent-color';
                    colorEl.style.backgroundColor = color;
                    colorEl.title = color.toUpperCase();
                    colorEl.addEventListener('click', () => {
                        colorPreview.style.backgroundColor = color;
                        colorValue.textContent = color.toUpperCase();
                    });
                    recentColorsContainer.appendChild(colorEl);
                });
            }
            
            // 清空历史记录
            clearHistoryBtn.addEventListener('click', function() {
                recentColors = [];
                updateRecentColors();
                localStorage.removeItem('recentColors');
            });
            
            // 从localStorage加载历史记录
            function loadRecentColors() {
                const savedColors = localStorage.getItem('recentColors');
                if (savedColors) {
                    recentColors = JSON.parse(savedColors);
                    updateRecentColors();
                }
            }
            
            // 复制颜色值
            copyBtn.addEventListener('click', function() {
                const color = colorValue.textContent;
                navigator.clipboard.writeText(color).then(function() {
                    const originalText = copyBtn.innerHTML;
                    copyBtn.innerHTML = '<i class="fas fa-check"></i> 已复制!';
                    setTimeout(function() {
                        copyBtn.innerHTML = originalText;
                    }, 2000);
                });
            });
            
            // 缩放按钮
            zoomInBtn.addEventListener('click', function() {
                if (!img) return;
                
                scale *= 1.2;
                scale = Math.min(scale, 10);
                drawImage();
            });
            
            zoomOutBtn.addEventListener('click', function() {
                if (!img) return;
                
                scale /= 1.2;
                scale = Math.max(scale, 0.1);
                drawImage();
            });
            
            // 重置视图
            resetViewBtn.addEventListener('click', function() {
                if (!img) return;
                
                initCanvasSize();
                scale = Math.min(
                    canvas.width / img.width,
                    canvas.height / img.height
                ) * 0.85;
                offsetX = (canvas.width - img.width * scale) / 2;
                offsetY = (canvas.height - img.height * scale) / 2;
                drawImage();
            });
            
            // 切换侧边栏
            toggleSidebarBtn.addEventListener('click', function() {
                sidebar.classList.toggle('collapsed');
                // 在移动设备上，侧边栏折叠时隐藏
                if (window.innerWidth <= 900) {
                    if (sidebar.classList.contains('collapsed')) {
                        sidebar.style.display = 'none';
                    } else {
                        sidebar.style.display = 'flex';
                    }
                }
            });
            
            // 初始化Canvas尺寸
            initCanvasSize();
            window.addEventListener('resize', initCanvasSize);
            
            // 初始化颜色预览
            colorPreview.style.backgroundColor = '#FFFFFF';
            
            // 加载最近使用的颜色
            loadRecentColors();
        });
    </script>
</body>
</html>